<template>
	<view class="min-h-[100vh] bg-[var(--page-bg-color)] overflow-hidden" :style="themeColor()">
		<view class="bg-[#fff] fixed top-0 left-0 right-0 z-10">
			<view class="tab-style-1 !py-[24rpx] ">
				<view class="tab-left">

					<block v-for="(item, index) in statusList" :key="index">
						<view class="tab-left-item !text-[32rpx]"
							:class="{ '!text-primary class-select': activeStatus === item.key }" @click="statusItemFn(item.key)">{{
								item.name }}</view>
					</block>
				</view>
				<view class="tab-right" @click="handleSelect">
					<view class="tab-right-date leading-[34rpx]">日期</view>
					<view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
				</view>
			</view>
			<!-- 门店订单/个人订单 -->
			<view class="bg-[var(--page-bg-color)] p-[20rpx]" v-if="checkPermi(['statistics:shop:query'])">
				<u-subsection :list="searchType" @change="updateSearchType" mode="button" activeColor="var(--primary-color)"
					:fontSize="14" :current="searchTypeIndex"></u-subsection>
			</view>

		</view>


		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getListFn" top="150rpx">
			<view class="sidebar-margin  flex flex-wrap justify-between items-center mt-[var(--top-m)]"
				v-if="searchTypeIndex === 0 && checkPermi(['statistics:shop:query'])">
				<view class="w-[49%]  flex flex-col items-center box-border card-template rounded-[8rpx] p-[20rpx] mt-[20rpx]">
					<view class="flex items-center w-full border-0 border-b-[2rpx] border-solid border-[#ddd]">
						<view
							class="w-[80rpx] h-[80rpx] text-center rounded-[40rpx] text-[40rpx] font-500 leading-[80rpx] text-[#fff]">
							<u-image width="70rpx" height="70rpx"
								src="https://files.meton.vip/f8f33900d5d57023de105dea615aa35b4121763383dc479a738279551197b80f.png"></u-image>
						</view>
						<view class="flex  w-full flex-col ml-[20rpx] text-right">
							<view class="text-[var(--text-color-light9)] text-[24rpx] ">实收业绩(元)</view>
							<view class="text-[#333] text-[44rpx] price-font leading-[36rpx] mt-[12rpx]">{{
								fen2yuan(summary?.otherPrice || 0) }}</view>
						</view>
					</view>
					<view class="flex  w-full mt-[12rpx]">
						<view class="text-[var(--text-color-light9)] text-[24rpx] ">人均收入:{{
							fen2yuan(summary?.otherPriceAvg || 0) }}元</view>
					</view>
				</view>
				<view class="w-[49%]  flex flex-col items-center box-border card-template rounded-[8rpx] p-[20rpx] mt-[20rpx]">
					<view class="flex items-center w-full border-0 border-b-[2rpx] border-solid border-[#ddd]">
						<view
							class="w-[80rpx] h-[80rpx] text-center rounded-[40rpx] text-[40rpx] font-500 leading-[80rpx] text-[#fff]">
							<u-image width="70rpx" height="70rpx"
								src="https://files.meton.vip/f8f33900d5d57023de105dea615aa35b4121763383dc479a738279551197b80f.png"></u-image>
						</view>
						<view class="flex  w-full flex-col ml-[20rpx] text-right">
							<view class="text-[var(--text-color-light9)] text-[24rpx] ">充值业绩(元)</view>
							<view class="text-[#333] text-[44rpx] price-font leading-[36rpx] mt-[12rpx]">{{
								fen2yuan(summary?.rechargePrice || 0) }}</view>
						</view>
					</view>
					<view class="flex  w-full mt-[12rpx]">
						<view class="text-[var(--text-color-light9)] text-[24rpx] ">人均充值:{{
							fen2yuan(summary?.rechargePriceAvg || 0) }}元</view>
					</view>

				</view>
				<view class="w-[49%]  flex flex-col items-center box-border card-template rounded-[8rpx] p-[20rpx] mt-[20rpx]">
					<view class="flex items-center w-full border-0 border-b-[2rpx] border-solid border-[#ddd]">
						<view
							class="w-[80rpx] h-[80rpx] text-center rounded-[40rpx] text-[40rpx] font-500 leading-[80rpx] text-[#fff]">
							<u-image width="70rpx" height="70rpx"
								src="https://files.meton.vip/f8f33900d5d57023de105dea615aa35b4121763383dc479a738279551197b80f.png"></u-image>
						</view>
						<view class="flex  w-full flex-col ml-[20rpx] text-right">
							<view class="text-[var(--text-color-light9)] text-[24rpx] ">划卡业绩(元)</view>
							<view class="text-[#333] text-[44rpx] price-font leading-[36rpx] mt-[12rpx]">{{
								fen2yuan(summary?.ppcPrice || 0) }}</view>
						</view>
					</view>
					<view class="flex  w-full mt-[12rpx]">
						<view class="text-[var(--text-color-light9)] text-[24rpx] ">人均划卡:{{
							fen2yuan(summary?.ppcPriceAvg || 0) }}元</view>
					</view>

				</view>

				<view class="w-[49%]  flex flex-col items-center box-border card-template rounded-[8rpx] p-[20rpx] mt-[20rpx]">
					<view class="flex items-center w-full border-0 border-b-[2rpx] border-solid border-[#ddd]">
						<view
							class="w-[80rpx] h-[80rpx] text-center rounded-[40rpx] text-[40rpx] font-500 leading-[80rpx] text-[#fff]">
							<u-image width="70rpx" height="70rpx"
								src="https://files.meton.vip/f8f33900d5d57023de105dea615aa35b4121763383dc479a738279551197b80f.png"></u-image>
						</view>
						<view class="flex  w-full flex-col ml-[20rpx] text-right">
							<view class="text-[var(--text-color-light9)] text-[24rpx] ">消耗业绩(元)</view>
							<view class="text-[#333] text-[44rpx] price-font leading-[36rpx] mt-[12rpx]">{{
								fen2yuan(summary?.performancePrice || 0) }}</view>
						</view>
					</view>
					<view class="flex  w-full mt-[12rpx]">
						<view class="text-[var(--text-color-light9)] text-[24rpx] ">人均消耗:{{
							fen2yuan(summary?.performancePriceAvg || 0) }}元</view>
					</view>

				</view>
				<view class="w-[49%]  flex flex-col items-center box-border card-template rounded-[8rpx] p-[20rpx] mt-[20rpx]">
					<view class="flex items-center w-full border-0 border-b-[2rpx] border-solid border-[#ddd]">
						<view
							class="w-[80rpx] h-[80rpx] text-center rounded-[40rpx] text-[40rpx] font-500 leading-[80rpx] text-[#fff]">
							<u-image width="70rpx" height="70rpx"
								src="https://files.meton.vip/f8f33900d5d57023de105dea615aa35b4121763383dc479a738279551197b80f.png"></u-image>
						</view>
						<view class="flex  w-full flex-col ml-[20rpx] text-right">
							<view class="text-[var(--text-color-light9)] text-[24rpx] ">手工数量</view>
							<view class="text-[#333] text-[44rpx] price-font leading-[36rpx] mt-[12rpx]">{{
								summary?.serviceNum || 0 }}</view>
						</view>
					</view>
					<view class="flex  w-full mt-[12rpx]">
						<view class="text-[var(--text-color-light9)] text-[24rpx] ">人均服务手工量:{{
							summary?.serviceNumAvg || 0 }}</view>
					</view>

				</view>
				<view class="w-[49%]  flex flex-col items-center box-border card-template rounded-[8rpx] p-[20rpx] mt-[20rpx]">
					<view class="flex items-center w-full border-0 border-b-[2rpx] border-solid border-[#ddd]">
						<view
							class="w-[80rpx] h-[80rpx] text-center rounded-[40rpx] text-[40rpx] font-500 leading-[80rpx] text-[#fff]">
							<u-image width="70rpx" height="70rpx"
								src="https://files.meton.vip/f8f33900d5d57023de105dea615aa35b4121763383dc479a738279551197b80f.png"></u-image>
						</view>
						<view class="flex  w-full flex-col ml-[20rpx] text-right">
							<view class="text-[var(--text-color-light9)] text-[24rpx] ">手工费用(元)</view>
							<view class="text-[#333] text-[44rpx] price-font leading-[36rpx] mt-[12rpx]">{{
								fen2yuan(summary?.servicesPrice || 0) }}</view>
						</view>
					</view>
					<view class="flex  w-full mt-[12rpx]">
						<view class="text-[var(--text-color-light9)] text-[24rpx] ">人均手工费用:{{
							fen2yuan(summary?.servicesPriceAvg || 0) }}元</view>
					</view>

				</view>

			</view>
			<view v-for="(item, index) in list" :key="item.order_id" class="sidebar-margin card-template mt-[var(--top-m)]">
				<view class="flex items-center w-[100%] mb-[20rpx] ">
					<view class="w-[60rpx] h-[60rpx] rounded-[8rpx]  relative">
						<image
							:src="item.avatar || 'https://files.meton.vip/2310e2533cff85c0f22420d6b0950a372b769f45ed8a720cfbd9597a5fdd5c42.png'"
							class="w-[60rpx] h-[60rpx]"></image>
						<image class="w-[20rpx] h-[20rpx] absolute right-0 bottom-0"
							:src="item.sex == 1 ? 'http://files.meton.vip/09d8d7f71c0df8949ea6922aedd3026cb70db9ba50fe748d969a96e537f18f39.png' : 'http://files.meton.vip/c5c240342d2925853f957ce6a4b5b98f0ecfeadbd500aed3424ad0f733ee7c0f.png'">

						</image>
					</view>
					<view class="flex-1  flex items-center ml-[20rpx]    box-border  border-0">
						<view class="flex-1 flex justify-between">
							<view class="text-[32rpx] text-[#333] font-bold">{{ item.employeeName }} <text
									class="text-[28rpx] font-500">({{
										item.employeeId }})</text></view>
							<view class="text-[28rpx] text-[var(--text-color-light9)] ">
								归属:{{ item.nodeName }}

							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between	mb-[20rpx]">
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">实收业绩:<text
							class="price-font"> {{ fen2yuan(item.otherPrice || 0) }}</text>
						元</view>
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">销售业绩:
						<text class="price-font"> {{ fen2yuan(item.salesPrice || 0) }}</text>
						元
					</view>
				</view>
				<view class="flex justify-between	mb-[20rpx]">
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">还款业绩:
						<text class="price-font"> {{ fen2yuan(item.repayPrice || 0) }}</text>
						元
					</view>
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">充值业绩:
						<text class="price-font"> {{ fen2yuan(item.rechargePrice || 0) }}</text>
						元
					</view>
				</view>
				<view class="flex justify-between	mb-[20rpx]">
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">划卡业绩:
						<text class="price-font"> {{ fen2yuan(item.ppcPrice || 0) }}</text>
						元
					</view>
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">消耗业绩:
						<text class="price-font"> {{ fen2yuan(item.performancePrice || 0) }}</text>
						元
					</view>
				</view>
				<view class="flex justify-between	mb-[20rpx]">
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">服务手工量:
						<text class="price-font"> {{ item.serviceNum || 0 }}</text>

					</view>
					<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">服务手工费:
						<text class="price-font"> {{ fen2yuan(item.servicesPrice || 0) }}</text>
						元
					</view>
				</view>



			</view>
			<mescroll-empty v-if="!list.length && loading" :option="{ tip: '暂无数据' }"></mescroll-empty>
		</mescroll-body>
		<!-- 时间选择 -->
		<select-date ref="selectDateRef" @confirm="confirmFn" />
	</view>
	<!-- 水印 -->
	<watermark></watermark>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { t } from '@/locale'
import selectDate from '@/components/select-date/select-date.vue';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { getStatisticsRebateEmployee } from '@/addon/statistics/api/statistics';
import { checkPermi } from '@/utils/auth'

import { copy } from '@/utils/common'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { fen2yuan, timeFormat } from '@/utils/formatting';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
const statusList = ref([
	{ name: '今日', key: 0 },
	{ name: '本周', key: 1 },
	{ name: '本月', key: 2 },
])
// const getRechargeStatusListFn = () => {
// 	getRechargeStatusList().then((res: any) => {
// 		statusList.value = res.data
// 	})
// }
// 类型搜索
const activeStatus = ref(0)
const statusItemFn = (value: any) => {
	activeStatus.value = value;
	getMescroll().resetUpScroll();
}
/** 搜索类型 */
const searchType = ref([{ name: '门店', value: 0 }, { name: '个人', value: 1 }])
const searchTypeIndex = ref(0)
/**
 * 更新搜索类型并重置滚动列表
 * @param {number} index - 选中的搜索类型索引
 */
const updateSearchType = (index: number) => {
	searchTypeIndex.value = index;
	getMescroll().resetUpScroll();
}
//日期筛选
const create_time = ref([])
const selectDateRef = ref()
const handleSelect = () => {
	selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
	create_time.value = data;
	getMescroll().resetUpScroll();
}

// getRechargeStatusListFn()
const list = ref<Array<any>>([]),
	loading = ref<boolean>(false),
	mescrollRef = ref(null);

interface mescrollStructure {
	num: number,
	size: number,
	endSuccess: Function,
	[propName: string]: any
}
const summary = ref<any>() // 订单统计数据

let wap_member_id = uni.getStorageSync('wap_member_id');
const getListFn = (mescroll: mescrollStructure) => {

	if (!checkPermi(['statistics:shop:query'])) {

		searchTypeIndex.value = 1
	}
	loading.value = false;
	let data: Object = {

		employeeId: searchTypeIndex.value == 0 ? undefined : wap_member_id, //员工名称

		query: activeStatus.value,
		times: create_time.value,
	};
	getStatisticsRebateEmployee(data).then((res: any) => {
		summary.value = res.data.total

		let newArr = res.data.data;
		mescroll.endSuccess(newArr.length);
		//设置列表数据
		list.value = []; //如果是第一页需手动制空列表
		list.value = list.value.concat(newArr);
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})




}

// const toDetailFn = (data) => {
// 	return
// 	redirect({ url: '/addon/recharge/pages/recharge_record_detail', param: { id: data.order_id } });
// }
</script>

<style lang="scss" scoped></style>
